<template>
  <div>
    <button @click="lastName = 'li'">改变名字</button>
    <button @click="fullName = 'xiao zhang'">改变full名字</button>
    firstName--->{{ firstName }} lastName--->{{ lastName }} fullName--->{{
      fullName
    }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script setup lang="ts">
import { computed, ref } from "vue";
const firstName = ref("lao");
const lastName = ref("wang");

//只读
/* const fullName = computed(() => {
  return firstName.value + " " + lastName.value;
}); */

const fullName = computed({
  get() {
    return firstName.value + " " + lastName.value;
  },
  set(val) {
    const [first, last] = val.split(" ");
    firstName.value = first;
    lastName.value = last;
  },
});

console.log(fullName);
</script>

<style scoped lang="sass"></style>
